revision:
<div class="container inline">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline{margin: 3vw 0vw;}
.inline > * {display: inline;}
</style>
:
<div class="container inline-block">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-block > * {display: inline-block;}
</style>
<div class="container inline-table">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-table > * {display: inline-table;}
</style>
<div class="container absolute">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.absolute { position: relative; height: 5ch;}
.absolute > *, {position: absolute;top: 0;width: 4ch;}
.absolute:nth-child(2) {left: 4ch;}
.absolute:nth-child(3) {left: 8ch;}
</style>
<div class="container fixed">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.fixed { position: relative; height: 5ch;}
.fixed > * {position: absolute;top: 0;width: 4ch;}
.fixed:nth-child(2) {left: 4ch;}
.fixed:nth-child(3) {left: 8ch;}
</style>
<div class="container float">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.float {display: flow-root;}
.float > * {float: left;}
</style>
<div class="container columns">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.columns {columns: 3;}
</style>
<div class="container flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.flex {display: flex;}
</style>
<div class="container inline-flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-flex {display: inline-flex;}
</style>
<div class="container inline-grid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-grid > * {display: inline-grid;}
</style>
<div class="container grid grid-auto-flow">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.grid {display: grid;}
.grid-auto-flow {grid-auto-flow: column;}
</style>
<div class="container grid grid-template-columns">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.grid {display: grid;}
.grid-template-columns {grid-template-columns: repeat(3, 1fr);}
</style>
<div class="container grid grid-template-areas">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.grid {display: grid;}
.grid-template-areas {grid-template-areas: "a b c";}
</style>
<div class="container writing-mode">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.writing-mode {writing-mode: vertical-lr;}
</style>
<div class="container block">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.block > *{display: block;}
</style>